<!--
 * @Author: your name
 * @Date: 2021-01-07 14:04:59
 * @LastEditTime: 2022-02-04 12:50:01
 * @LastEditors: 晟松
 * @Description: In User Settings Edit
 * @FilePath: \volunteer-vue3-admin\src\views\AppMain.vue
 *<el-scrollbar></el-scrollbar>
-->
<template>
    <el-container>
        <el-aside width="auto">
            <side-bar></side-bar>
        </el-aside>
        <el-container>
            <el-header :height="nav_height">
                <navigate-bar></navigate-bar>
            </el-header>
            <tag-views></tag-views>
            <el-main>
                <el-scrollbar style="padding: 20px; box-sizing: border-box; background: #fff">
                    <router-view v-slot="{ Component }">
                        <transition name="el-zoom-in-top" mode="out-in">
                            <!-- 这里似乎可以使用keep-alive包裹一手 -->
                            <!-- <suspense> -->
                            <keep-alive>
                                <component :key="routerAlive" :is="Component" />
                            </keep-alive>
                            <!-- </suspense> -->
                        </transition>
                    </router-view>
                </el-scrollbar>
            </el-main>
        </el-container>
    </el-container>
</template>
<script setup>
import { nav_height } from "@/styles/variables.scss.js";
import NavigateBar from "@/components/layout/NavigateBar.vue";
import SideBar from "@/components/layout/SideBar.vue";
import TagViews from "../components/layout/TagViews.vue";
import { provide, ref, watchEffect } from "vue";
import { useRoute } from "vue-router";

const route = useRoute();
const routerAlive = ref(null);
watchEffect(() => {
    routerAlive.value = route.name;
});
// 这个provide是在personal里面inject使用的
provide("reload", () => {
    // 通过key值，手动触发重新渲染
    routerAlive.value = Math.random() + "_" + Math.random();
});
</script>
<style lang="scss" scoped>
.el-main {
    height: calc(100vh - v-bind(nav_height));
    background: $main-bg-color;
    :deep(.el-scrollbar__bar.is-horizontal) {
        visibility: hidden;
    }
}
</style>
